<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/8/4
  Time: 16:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>Youth Studio</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="" />
    <!-- css files -->
    <link href="static/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
    <link href="static/css/cobox.css" rel="stylesheet" type="text/css">
    <link href="static/css/portfolio.css" rel="stylesheet" type="text/css" media="all">
    <link href="static/css/style.css" rel="stylesheet" type="text/css" media="all">
    <link href="static/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all">
    <!-- /css files -->
    <!-- font links -->
    <link href='https://fonts.googleapis.com/css?family=Quicksand:400,700,300' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Cinzel:400,700,900' rel='stylesheet' type='text/css'>
    <!-- /font links -->
    <!-- js files -->
    <script src="static/js/modernizr.custom.js"></script>

    <!-- /js files -->
    <style>

        body {
            background: #fff;
            font: 400 12px/1.8 "Open Sans", sans-serif;
            color: #666;
            -webkit-font-smoothing: antialiased;
        }
        div{
            font-family: "Roboto Condensed", sans-serif;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        .bottom{position:fixed; bottom: 90px; left: 30px; z-index:9999;}
        .btn-radius{border-radius:45px;width: 65px;height: 65px;background-color:#f0efef;}

        .btn-radius-img{
            width: 65px;
            height: 65px;
            border-radius: 45px;
            -webkit-border-radius: 45px;
            -moz-border-radius: 45px;
        }


        .btn-radius-otation-2s{
            -webkit-animation: fa-spin 4s infinite linear;
            animation: fa-spin 4s infinite linear;
        }

        .btn-radius-otation{
            -webkit-transition-property: -webkit-transform;
            -webkit-transition-duration: 1s;
            -moz-transition-property: -moz-transform;
            -moz-transition-duration: 1s;
            -webkit-animation: rotate 3s linear infinite;
            -moz-animation: rotate 3s linear infinite;
            -o-animation: rotate 3s linear infinite;
            animation: rotate 3s linear infinite;
        }
        @-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
            to{-webkit-transform: rotate(360deg)}
        }
        @-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
            to{-moz-transform: rotate(359deg)}
        }
        @-o-keyframes rotate{from{-o-transform: rotate(0deg)}
            to{-o-transform: rotate(359deg)}
        }
        @keyframes rotate{from{transform: rotate(0deg)}
            to{transform: rotate(359deg)}
        }
    </style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<div class="navbar-wrapper">
    <div class="container">

        <nav class="navbar navbar-inverse navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/">Youth Studio</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse navbar-right">
                    <ul class="nav navbar-nav link-effect">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#portfolio">Portfolio</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>

    </div>
</div>
<!-- Banner -->
<div class="banner">
    <ul class="rslides" id="slider">
        <li>
            <div class="banner-info">
                <h3>青春</h3>
                <span class="line1"></span>
                <p>一种形而上的力量</p>
                <span class="line2"></span>
                <div class="social-icons">
                    <%--<a href="#"><span class="facebook"></span></a>--%>
                    <%--<a href="#"><span class="twitter"></span></a>--%>
                    <%--<a href="#"><span class="linkedin"></span></a>--%>
                    <%--<a href="#"><span class="googleplus"></span></a>--%>
                </div>
            </div>
        </li>
    </ul>
</div>
<!-- /Banner -->
<!-- About -->
<div class="about-me" id="about">
    <h3 class="text-center slideanim">About My Skills</h3>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-xs-12">
                <div class="mydetails slideanim text-center">
                    <img class="img-circle img-responsive" src="http://b2-q.mafengwo.net/s10/M00/3D/BA/wKgBZ1kNhFCAJ6sjAAnz0eDCJQg07.jpeg?imageMogr2%2Fthumbnail%2F%21200x200r%2Fgravity%2FCenter%2Fcrop%2F%21200x200%2Fquality%2F90" alt="Generic placeholder image" width="200" height="200">
                    <h3>Bai Keyang</h3>
                    <p>Java Developer</p>
                    <div class="social-icons">
                        <%--<a href="#"><span class="facebook"></span></a>--%>
                        <%--<a href="#"><span class="twitter"></span></a>--%>
                        <%--<a href="#"><span class="linkedin"></span></a>--%>
                        <%--<a href="#"><span class="googleplus"></span></a>--%>
                    </div>
                </div>
            </div>
            <div class="col-md-8 col-xs-12">
                <div class="myskills slideanim">
                    <h3 class="text-center">My Skill Info</h3>
                    <p class="skill-text"></p>
                    <div class="skill-info">
                        <div class="table-responsive">
                            <table class="table">
                                <tbody>
                                <tr>
                                    <td style="width: 20%;"><h4>Java</h4></td>
                                    <td style="width: 70%;">
                                        <div class="progress" style="height: 10px;margin-top: 5px;width: 90%;">
                                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="76" aria-valuemin="0" aria-valuemax="100" style="width: 76%">
                                            </div>
                                        </div>
                                    </td>
                                    <td style="width: 10%;"><p>76%</p></td>
                                </tr>
                                <tr>
                                    <td><h4>MySQL</h4></td>
                                    <td>
                                        <div class="progress" style="height: 10px;margin-top: 5px;width: 90%;">
                                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%">
                                            </div>
                                        </div>
                                    </td>
                                    <td><p>65%</p></td>
                                </tr>
                                <tr>
                                    <td><h4>Oracle</h4></td>
                                    <td>
                                        <div class="progress" style="height: 10px;margin-top: 5px;width: 90%;">
                                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100" style="width: 67%">
                                            </div>
                                        </div>
                                    </td>
                                    <td><p>67%</p></td>
                                </tr>
                                <tr>
                                    <td><h4>Redis</h4></td>
                                    <td>
                                        <div class="progress" style="height: 10px;margin-top: 5px;width: 90%;">
                                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="59" aria-valuemin="0" aria-valuemax="100" style="width: 59%">
                                            </div>
                                        </div>
                                    </td>
                                    <td><p>59%</p></td>
                                </tr>
                                <tr>
                                    <td><h4>Javascript</h4></td>
                                    <td>
                                        <div class="progress" style="height: 10px;margin-top: 5px;width: 90%;">
                                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%">
                                            </div>
                                        </div>
                                    </td>
                                    <td><p>72%</p></td>
                                </tr>
                                <tr>
                                    <td><h4>jQuery</h4></td>
                                    <td>
                                        <div class="progress" style="height: 10px;margin-top: 5px;width: 90%;">
                                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="87" aria-valuemin="0" aria-valuemax="100" style="width: 87%">
                                            </div>
                                        </div>
                                    </td>
                                    <td><p>87%</p></td>
                                </tr>
                                <tr>
                                    <td><h4>HTML5</h4></td>
                                    <td>
                                        <div class="progress" style="height: 10px;margin-top: 5px;width: 90%;">
                                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%">
                                            </div>
                                        </div>
                                    </td>
                                    <td><p>68%</p></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /About -->
<!-- Portfolio -->
<div class="myportfolio" id="portfolio">
    <h3 class="text-center slideanim">My Portfolio</h3>
    <p class="text-center slideanim"></p>
    <section class="vertical" id="grid3d">
        <div class="grid-wrap">
            <div class="grid">
                <figure><img class="slideanim" src="/static/images/blog_1.jpg" alt="img01"/></figure>
                <figure><img class="slideanim" src="/static/images/bike_2.jpg" alt="img05"/></figure>
                <figure><img class="slideanim" src="/static/images/hr_edu_4.jpg" alt="img08"/></figure>
                <figure><img class="slideanim" src="/static/images/more_3.jpg" alt="img08"/></figure>
            </div>
        </div><!-- /grid-wrap -->
        <div class="content">
            <div>
                <div class="content-img"><img src="/static/images/blog_1-1.jpg" class="img-responsive" alt="my projects"></div>
                <h3 class="content-text"><a target="_blank" href="http://www.baikeyang.com/">青年博客</a></h3>
                <p class="content-text">个人博客上线5年多了，不知道是什么让我坚持到今天，仍然乐此不疲的写着。在这个期间也有人问过我，我的答案是不知道，写博客就是简单的将我在生活中、工作中的所得记录下来，谈不上分享，
                    如果有幸能帮助到他人那也会是一件很不错的事。几十年后回首翻看这记录的种种，也会笑着接受人生的过往吧。至于有多少人看？管他呢，因为这个真没有想过。</p>
            </div>
            <div>
                <div class="content-img"><img src="/static/images/bike_2-2.jpg" class="img-responsive" alt="my projects"></div>
                <h3 class="content-text">西安市公共自行车</h3>
                <p class="content-text">西安公共自行车服务系统是西安市公共交通体系的重要组成部分，是绿色、低碳、健康、环保提高城市服务功能的惠民工程，
                    按照“实名办卡、通租通还、限时免费、超时计费、智能管理、一卡通行、绿色环保、方便出行“的原则管理运营。西安公共自行车微信小程序为第三方APP。<br/>
                    源码：
                    <a href='https://gitee.com/Mr.bai/XianPublicBicycle/stargazers'
                       title='在码云Gitee上Star项目' target='_blank' style='text-decoration: none;'>
                        <img src='https://gitee.com/Mr.bai/XianPublicBicycle/badge/star.svg?theme=dark' alt='star'></img>
                    </a>
                    <a href='https://gitee.com/Mr.bai/XianPublicBicycle/members'
                       title='在码云Gitee上Fork项目' target='_blank' style='text-decoration: none;'>
                        <img src='https://gitee.com/Mr.bai/XianPublicBicycle/badge/fork.svg?theme=dark' alt='fork'></img>
                    </a>
                </p>
            </div>
            <div>
                <div class="content-img">
                    <img src="/static/images/hr_edu_4-4.jpg" class="img-responsive" alt="my projects">
                </div>
                <h3 class="content-text">汇睿海外在线教育平台</h3>
                <p class="content-text">这是针对一家教育机构而开发的海外在线教育平台。该平台是一个欧美式线上教育一对一培训平台，通过本平台系统可以进行 在线学习、看直播公开课、实时在线测评。</p>
            </div>
            <div>
                <div class="content-img">
                    <img src="/static/images/more_3-3.jpg" class="img-responsive" alt="my projects">
                </div>
                <h3 class="content-text">Coming Soon……</h3>
                <p class="content-text">更多作品正在产出中，敬请期待。</p>
            </div>
            <span class="loading"></span>
            <span class="icon close-content"></span>
        </div>
    </section>
</div>
<!-- /Portfolio -->
<!-- footer -->
<div class="contact-me" id="contact">
    <h3 class="text-center">Contact Me</h3>
    <div class="container">
        <footer>
            <div class="row">
                <div class="col-md-12">
                    <div class="contact-info">
                        <div class="footer-info">
                            <div class="col-md-4">
                                <i class="glyphicon glyphicon-globe"></i>
                                <p class="p1">Hi-Tech Dist Xi'an City</p>
                                <p class="p2">Shaanxi, China</p>
                            </div>
                            <div class="col-md-4">
                                <i class="glyphicon glyphicon-phone-alt"></i>
                                <p class="p1" style="padding-top: 30px;">+86 18691661193</p>
                            </div>
                            <div class="col-md-4">
                                <i class="glyphicon glyphicon-envelope"></i>
                                <p class="p1" style="padding-top: 30px;"><a href="mailto:baikeyang@vip.qq.com">baikeyang@vip.qq.com</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            <div class="copyright">
                <p class="text-center">
                    Copyright &copy; 2019 <a href="http://www.bkybk.com/" target="_blank">Youth
                    studio </a> . By the <a href="http://www.baikeyang.com/"
                                            target="_blank">BaiKeyang</a> . &nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.beian.miit.gov.cn/" target="_blank" rel="nofllow">陕ICP备17008101号-1</a>
                </p>
            </div>
            <a href="#myPage" title="To Top"><span class="glyphicon glyphicon-chevron-up"></span></a>
        </footer>
    </div>
</div>
<div>
    <div class="bottom">
        <div class="btn-radius">
            <img src="/static/images/3404088002870760.jpg" class="btn-radius-img"/>

            <div class="btn-radius-text-play fa fa-play" style="font-size:45px;margin-top: 10px;margin-left: 19px;position: absolute;left: 0px;top: 0px;color:#fff;display:none;">
            </div>
            <div class="btn-radius-text-pause fa fa-pause" style="font-size: 38px;padding-left: 16px;padding-top: 14px;position: absolute;left: 0px;top: 0px;color:#fff;display:none;">
            </div>
        </div>
    </div>
</div>
<!-- /footer -->
<!-- js files -->
<script src="/static/dist/lib/jquery/jquery.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<!-- js files for portfolio -->
<script src="static/js/classie.js"></script>
<script src="static/js/helper.js"></script>
<script src="static/js/grid3d.js"></script>
<script>
    new grid3D( document.getElementById( 'grid3d' ) );
</script>
<!-- /js files for portfolio -->

<script>
    var audio = null;

    function initAudio() {
        audio = document.createElement('audio') //生成一个audio元素
        audio.controls = false //这样控件才能显示出来
        document.body.appendChild(audio) //把它添加到页面中
    }
    /**
     * 从服务端获取音频数据
     */
    function load() {
        if(!audio){
            initAudio();
        }
        audio.pause();
        audio.src = 'http://image.bkybk.com/bg.m4a'; //音乐的路径
        //audio.src = url;
        //audio.autoplay = true;
        audio.loop = true;
        audio.load();
        //audio.play();
    }

    $(document).ready(function(){

//        var h = "";
//        h += " 屏幕分辨率的宽："+ window.screen.width+"\n";
//        h += " 屏幕分辨率的高："+ window.screen.height+"\n";
        //console.log(h);

        var bannerHeight = window.screen.height - 75;
        var bannerWidht = window.screen.width;

        //$('.banner').attr("style", "height: "+ bannerHeight + "px;background: url(https://picsum.photos/"+bannerWidht+"/"+bannerHeight+"/) no-repeat;" );

        $('.banner').attr("style", "background-color:#fff; background-repeat:no-repeat;background-position:center center;width:100%;height: "+ bannerHeight + "px;z-index:0;background: url(https://www.ifxiang.club/software/bing/index.jpg) no-repeat;background-size:cover;" );
        <!-- js for smooth scrolling -->
        // 为navbar + footer链接中的所有链接添加平滑滚动
        $(".navbar a, footer a[href='#myPage']").on('click', function(event) {

            // 存储hash
            var hash = this.hash;

            // 使用jQuery的animate（）方法添加平滑的页面滚动
            // 可选数字（900）指定滚动到指定区域所需的毫秒数
            $('html, body').animate({
                scrollTop: $(hash).offset().top
            }, 900, function(){

                // 滚动完成后，将URL添加到URL（默认点击行为）
                window.location.hash = hash;
            });
        });
        initAudio();
        load();
    });
    <!-- /js for smooth scrolling -->
    <!-- js for sliding -->
    $(window).scroll(function() {
        $(".slideanim").each(function(){
            var pos = $(this).offset().top;
            var winTop = $(window).scrollTop();
            if (pos < winTop + 600) {
                $(this).addClass("slide");
            }
        });
    });
    <!-- /js for sliding -->


    // 0：未播放（显示 播放按钮）；1：正在播放（显示 暂停按钮）
    var _isPlayStatus = 0;
    $('.btn-radius').on('click',function(){
        _isPlayStatus = _isPlayStatus == 0?1:0;
        if(_isPlayStatus == 0){
            $('.btn-radius-text-play').show();
            $('.btn-radius-text-pause').hide();
            // 停止旋转
            $('.btn-radius-img').removeClass('btn-radius-otation-2s');
            audio.pause();
        }else if(_isPlayStatus == 1){
            $('.btn-radius-img').addClass('btn-radius-otation-2s');
            $('.btn-radius-text-play').hide();
            $('.btn-radius-text-pause').show();
            audio.play();
        }
    });

    $('.btn-radius').on('mouseover', function () {
        if(_isPlayStatus == 0){
            $('.btn-radius-text-play').fadeIn(500);
            $('.btn-radius-text-pause').hide();
        }else if(_isPlayStatus == 1){
            $('.btn-radius-text-play').hide();
            $('.btn-radius-text-pause').fadeIn(500);
        }
    });
    $('.btn-radius').on('mouseleave', function () {
        if(_isPlayStatus == 0){
            $('.btn-radius-text-play').fadeOut(500);
        }else if(_isPlayStatus == 1){
            $('.btn-radius-text-pause').fadeOut(500);
        }
    });



</script>
<!-- /js files -->

</body>
</html>